<template>
  <div class="user-detail-container">
    <el-card>
      <div slot="header">
        <span>用户详情</span>
        <el-button style="float: right" type="primary" size="small" @click="$router.back()">
          返回
        </el-button>
      </div>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户ID">{{ user.id }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ user.name }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ user.department }}</el-descriptions-item>
        <el-descriptions-item label="职位">{{ user.position }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
        <el-descriptions-item label="入职时间">{{ user.joinDate }}</el-descriptions-item>
      </el-descriptions>

      <div class="detail-section">
        <h3>工作经历</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in user.experience"
            :key="index"
            :timestamp="activity.time">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'UserDetail',
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      user: {
        id: this.id,
        name: '张三',
        department: '技术部',
        position: '前端工程师',
        email: 'zhangsan@example.com',
        joinDate: '2020-01-01',
        experience: [
          {
            time: '2020-01-01',
            content: '入职公司'
          },
          {
            time: '2021-06-01',
            content: '晋升为高级前端工程师'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.user-detail-container {
  padding: 20px;
}

.detail-section {
  margin-top: 20px;
}

h3 {
  margin-bottom: 20px;
  color: #303133;
}
</style> 